<template>
  <!--角色相关操作区开始-->
    <div class="card">
        <el-button type="primary" @click="handleAdd" style="margin: 0 20px">新增权限</el-button>
        <el-input :prefix-icon="Search" placeholder="请输入权限名"
                  v-model="data.authorityName"
                  clearable
                  style="width: 240px; margin: 0 20px"/>
        <el-button @click="reset" style="margin: 0 20px">重置</el-button>
        <el-button type="primary" @click="authload" style="margin: 0 20px">查询</el-button>
    </div>
  <!--角色相关操作区结束-->

  <!-- 角色列表开始 -->
    <div class="card">
        <!-- el-table-column 的 template 标签中使用 #default="scope"，这是作用域插槽的写法，通过 scope 可以访问到当前行的数据对象 scope.row。 -->
        <el-table :data="data.tableData" style="width: 100%; min-height: 350px"
                  :header-cell-style="{ fontWeight: 'bold', color: '#1d1c1c', textAlign: 'center', backgroundColor: '#f5f4f1'}"
                  :cell-style="{ textAlign: 'center' }"
        >
            <el-table-column prop="authorityName" label="权限名称" />
            <el-table-column prop="description" label="权限描述" />
            <el-table-column prop="path" label="路径" />
            <el-table-column fixed="right" label="操作" min-width="80">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button link type="danger" size="small" @click="deleteAuth(scope.row.authorityId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
  <!-- 角色列表结束 -->

  <!--数据分页功能区开始-->
    <div class="card">
        <el-pagination
                v-model:current-page="data.pageNum"
                v-model:page-size="data.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 20]"
                :total="data.total"
                @current-change="authload"
                @size-change="authload"
        />
    </div>
  <!--数据分页功能区结束-->

  <!-- 新增/修改用户弹窗开始 -->
    <el-dialog title="新增权限" v-model="data.dialogFormVisible" width="400" destroy-on-close align-center>
        <el-form ref="authformRef" :model="data.authForm" :rules="data.rules" label-width="80px" style="padding: 20px 30px 10px 20px">
            <el-form-item label="权限名称" prop="authorityName">
                <el-input v-model="data.authForm.authorityName" autocomplete="off" style="width: 230px"/>
            </el-form-item>
            <el-form-item  label="权限描述" prop="description">
                <el-input v-model="data.authForm.description" autocomplete="off" style="width: 230px"/>
            </el-form-item>
            <el-form-item  label="路径" prop="path">
                <el-input v-model="data.authForm.path" autocomplete="off" style="width: 230px"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="data.dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="sava">保存</el-button>
            </div>
        </template>
    </el-dialog>
  <!-- 新增用户弹窗开始 -->
</template>

<script setup>
import {Delete, Search} from "@element-plus/icons-vue";
import {ref, reactive, markRaw} from "vue"
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";

// 数据
const data = reactive({
    authorityName: null,
    tableData: [], // 角色数据列表
    authForm: {},
    pageNum: 1,
    pageSize: 10,
    total: 0,  //数据总数
    rules: {
        authorityName: [
            {required: true, message: "请填写权限名称", trigger: 'change' },
            {max:20, message: "账号最多20位", trigger: 'blur'}
        ],
        description: [
            {required: true, message: "请填写权限描述", trigger: 'change' },
            {max:20, message: "账号最多20位", trigger: 'blur'}
        ],
        path: [
            {required: true, message: "请填写路径", trigger: 'change' },
            {max:20, message: "账号最多20位", trigger: 'blur'}
        ],
    },
})

// 权限查询
//分页 + 条件 查询
const authload = () => {
    // 前后端数据查询
    request.get('/api/admin/selectAuthPage', {
        params : {
            pageNum : data.pageNum,
            pageSize : data.pageSize,  //添加参数给后端实现分页
            authorityName: data.authorityName,
        }
    }).then(res => {
        if (res.code === "200") {
            data.tableData = res.data.list // 获取后端返回的所有权限信息
            data.total = res.data.total    // 后台数据总数
        } else {
            ElMessage.error(res.msg)
        }
    })
}
authload();


// 兼容 新增和修改
const sava = () => {
    data.authForm.authorityId ? editAuth() : addAuth()
}
// 新增弹窗控制
const handleAdd = () => {
    data.dialogFormVisible = true
    data.authForm = {}
}
// 表单绑定
const authformRef = ref()
// 新增权限方法
const addAuth = () => {
    authformRef.value.validate((valid) => {
        if (valid) {
            request.post('api/admin/addAuth', data.authForm).then(res =>{
                if (res.code === '200') {
                    ElMessage.success("新增权限成功")
                    authload() // 刷新
                    data.dialogFormVisible = false // 关闭弹窗
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    })
}

// 重置按钮
const reset = () => {
    data.authorityName = null
    authload()
}

// 删除按钮
const deleteAuth = (authorityId) => {
    ElMessageBox.confirm('您确定删除此角色嘛 此操作不可逆转！请谨慎操作！', '删除确定',{  // 删除弹窗确认
        type: "warning",
        icon: markRaw(Delete),
    }).then(res => {
        request.delete('api/admin/authDel/' + authorityId).then(res => {
            if (res.code === '200') {
                ElMessage.success("删除成功")
                authload()
            } else {
                ElMessage.error(res.msg)
            }
        })
    })
}

// 修改弹窗
const handleEdit = (row) => {
    data.dialogFormVisible = true;  // 弹窗打开
    data.authForm = JSON.parse(JSON.stringify(row));
}
const editAuth = () => {
    authformRef.value.validate((valid) => {
        if (valid) {
            request.put('api/admin/updateAuth', data.authForm).then(res =>{
                if (res.code === '200') {
                    ElMessage.success("修改权限成功")
                    authload() // 刷新
                    data.dialogFormVisible = false // 关闭弹窗
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    })
}
</script>

<style scoped>

</style>